<template>
  <el-aside width="200px" class="aside">
    <div class="aside-list">
      <!-- 菜单标签 -->
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
      >
        <!-- 隐藏展开按钮 -->
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :value="false" v-show="isCollapse">|||</el-radio-button>
          <el-radio-button :value="true" v-show="!isCollapse">|||</el-radio-button>
        </el-radio-group>

        <!-- 需要多个这个菜单项就用v-for实现-->
        <el-menu-item v-for="v in asidelist" :key="v.id" @click="handleMenuClick(v.id)">
          <!-- 实现动态icon图标 -->
          <!-- <el-icon><component :is="v.icon"></component></el-icon> -->
          <i class="iconfont" :class="v.icon"></i>
          <template #title>{{v.title}}</template>
        </el-menu-item>
      </el-menu>
    </div>
  </el-aside>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';

// 设置isCollapse的值为true，用于控制展开或隐藏
const isCollapse = ref(true)

// 引入第三方图标
let asidelist = ref([
  {id: 1, title: '酒店', icon: 'icon-jiudian'},
  {id: 2, title: '机票', icon: 'icon-lvxing'},
  {id: 3, title: '火车票', icon: 'icon-huoche'},
  {id: 4, title: '旅游', icon: 'icon-lvyou1'},
  {id: 5, title: '景点', icon: 'icon-jingdian'},
  {id: 6, title: '汽车票', icon: 'icon-tuijianqiche'},
  {id: 7, title: '船票', icon: 'icon-lunchuan'},
  {id: 8, title: '门票', icon: 'icon-menpiao'},
])

const router = useRouter()

// 处理菜单点击事件
const handleMenuClick = (id) => {
  switch (id) {
    case 2: // '机票'
      router.push('/plan')
      break;
      // 其他菜单项可以添加其他路由
      case 1: // '酒店'
        router.push('/')
        break;
    default:
      console.log('点击了菜单项', id);
  }
}
</script>

<style lang="scss">
/* 你的样式代码 */
</style>
